/*暗色主题*/
html[data-theme = 'dark'] {
    --color: #ff1f00;
    /*  头部导航栏 || 大背景颜色  */
    --header-color: #18171d;
    /*  头部导航栏下拉的颜色  */
    --header-change-color: #18171d;
    /* 用户名称   */
    --user-name-color: #ffffff;
    /*  导航栏图标指向  */
    --header-icon-bk: #151515;
    /* 欢迎词条背景 */
    --hello-bk: #1e1e1e;
    /*  欢迎词条的border  */
    --hello-border: #323232;
    --hello-title-hover-color: #4F46E5FF;
    /* 欢迎词条的文字颜色 */
    --hello-title-color: #ffffff;
    /* 欢迎词条的边框线颜色*/
    --hello-border-hover-color: #fffec4;
    /*  tab页的指向背景颜色  */
    --tabs-hover-bk: #ffcb46;
    /*  tab页的边框  */
    --tabs-border-color: #323232;
    /* tab页的icon颜色   */
    --tabs-icon-color: #ffffff;
    /* 首页卡片的边框色   */
    --card-border-color: #4b5563;
    /*卡片指向的颜色*/
    --card-border-hover-color: #fffec4;
    /*  卡片简介的颜色  */
    --card-briefing-color: #d1d5db;
    --change-theme-icon-color: #606060;
    --change-theme-icon-hover-color: #3C3C3CCC;
    --ware-chil1-color: rgba(0, 0, 0, 0.7);
    --ware-chil2-color: rgba(0, 0, 0, 0.5);
    --ware-chil3-color: rgba(0, 0, 0, 0.3);
    --ware-chil4-color: rgb(0, 0, 0);
    --topic-color: #dddddd;

}
/* 响应式布局 */
/*默认继承这个*/
:root {
    --no: 20;
    --color: #c7ffdd;
    /*  头部导航栏 || 大背景颜色  */
    --header-color: #F1F5FDFF;
    /*  头部导航栏下拉的颜色  */
    --header-change-color: #fff;
    /* 用户名称   */
    --user-name-color: #000;
    /*  导航栏图标指向  */
    --header-icon-bk: #d8d8d8;
    /* 欢迎词条背景 */
    --hello-bk: #fff;
    /*  欢迎词条的border  */
    --hello-border: #D3D3D3FF;
    /* 欢迎词条的文字颜色 */
    --hello-title-color: #000000;
    --hello-title-hover-color: #4F46E5FF;
    /* 欢迎词条的边框线颜色*/
    --hello-border-hover-color: #4F46E5FF;
    /*  tab页的指向背景颜色  */
    --tabs-hover-bk: #0067ff;
    /*  tab页的边框  */
    --tabs-border-color: #EFEFEFFF;
    /* tab页的icon颜色   */
    --tabs-icon-color: #222327;
    /* 首页卡片的边框色   */
    --card-border-color: #e5e7eb;
    /*卡片指向的颜色*/
    --card-border-hover-color: #4F46E5FF;
    /*  卡片简介的颜色  */
    --card-briefing-color: #908f9e;
    /* 右下角的主题切换ioco颜色   */
    --change-theme-icon-color: #292323CC;
    --change-theme-icon-hover-color: #FFEFB9CC;
    --ware-chil1-color: #FFFFFFB2;
    --ware-chil2-color: rgba(255,255,255,0.5);
    --ware-chil3-color: rgba(255,255,255,0.3);
    --ware-chil4-color: #fff;
    --topic-color: #2b2b2b;

}




* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

html {
    font-size: 37.5px;
}

@media screen and (min-width: 320px) {
    html {
        font-size: calc(320px / var(--no));
    }
}

@media screen and (min-width: 660px) {
    html {
        font-size: calc(660px / var(--no));
    }
}

@media screen and (min-width: 760px) {
    html {
        font-size: calc(760px / var(--no));
    }
}

@media screen and (min-width: 860px) {
    html {
        font-size: calc(860px / var(--no));
    }
}

@media screen and (min-width: 960px) {
    html {
        font-size: calc(960px / var(--no));
    }
}

@media screen and (min-width: 1024px) {
    html {
        font-size: calc(1024px / var(--no));
    }
}







